<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta charset="UTF-8">
    <title>优购优品网</title>
    <!-- <link rel="stylesheet" href="../css/themes/css/core.css">
    <link rel="stylesheet" href="../css/themes/css/icon.css">
    <link rel="stylesheet" href="../css/themes/css/home.css"> -->
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../css/local.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>

    <style>
        /* .content {
            background: #efefef;
            height: 100%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            position: relative;
        } */

        .row {
            position: relative;
        }

        .row .img {
            width: 100px;
            height: 80px;
            border-radius: 4px;
            overflow: hidden;
        }

        .row .img img {
            width: 100%;
            height: 100%;
        }

        .row .desc {
            padding-right: 5px;
            padding-left: 10px;
        }

        .row .desc .title {
            font-size: 14px;
            line-height: 20px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .row .desc .title .hot {
            color: #fff;
            background: #cd1b21;
            font-size: 12px;
            border-radius: 2px;
            margin-right: 5px;
            vertical-align: middle;
        }

        .row .desc .sub-title {
            font-size: 12px;
            color: #969799;
            line-height: 20px;
            height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .row .desc .sub-title * {
            vertical-align: middle;
        }

        .sku {
            padding: 3px 0;
            font-size: 13px;
            color: #9e9e9e;
        }


        .van-dropdown-menu {
            height: 40px;
        }



        .pd {
            padding: 5px 10px 5px 10px;
        }

        .pd>div {
            overflow: hidden;
            border-radius: 8px;
        }

        .f-r {
            text-align: right;
            color: #9e9e9e;
            font-size: 13px;
        }

        .button {
            text-align: right;
            padding: 5px 0;
        }

        .button button {
            margin-left: 10px;
        }

        .code {
            font-weight: 700;
            font-size: 15px;
            padding-bottom: 8px;
        }

        .close {
            float: right;
            color: #ff976a;
            font-size: 13px;
            font-weight: 500;
        }

        .van-button--small {
            height: 26px;
        }

        .tab {
            overflow: hidden;
            position: relative;
        }

        .tab>div {
            width: 33.33%;
            float: left;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 13px;
        }

        .tab .on {
            border-bottom: 3px solid #cd1b21;
            color: #cd1b21;
        }

        .van-uploader__preview-delete {
            position: absolute;
            top: -8px;
            right: -8px;
            color: #969799;
            font-size: 18px;
            background-color: #fff;
            border-radius: 100%;
            height: 20px;
        }

        .van-uploader__preview-image {
            width: 50px;
            height: 50px;
        }

        .van-uploader__upload {
            width: 50px;
            height: 50px;
        }
    </style>


</head>

<body>
    <div id="app" v-cloak>
        <div class="init-full">
            <van-nav-bar class="head" title="商品评价" left-arrow @click-left="onClickLeft"></van-nav-bar>
            <div class="body-no-bottom">
                <div class="content">
                    <div class="pd" v-for="(item,index) in goodsEvaluated">
                        <div>
                            <van-cell>
                                <div class="row flex-box">
                                    <div class="img">
                                        <img
                                            :src="item.ThumbnailsUrl?(shoppingMallServerIP + item.ThumbnailsUrl):'../image/no.png'" />
                                    </div>
                                    <div class="flex-main desc">
                                        <div class="title">{{item.ProductName}}</div>
                                        <div class="sku">{{item.SKU}}</div>
                                    </div>
                                </div>
                            </van-cell>
                            <van-cell title="打分">
                                <div>
                                    <van-rate v-model="evaluatedData[index].score" icon="like" void-icon="like-o">
                                    </van-rate>
                                </div>
                            </van-cell>
                            <van-field v-model="evaluatedData[index].reviewText" rows="4" autosize type="textarea"
                                placeholder="商品满足你的期待吗?说说你的使用心得,分享给想买的他们吧"></van-field>

                            <div style="background: #fff;padding: 10px 10px 0 15px;">
                                <div class="van-uploader">
                                    <div class="van-uploader__wrapper">
                                        <div class="van-uploader__preview"
                                            v-for="(imgItem,imgItemIndex) in evaluatedData[index].imageArray">
                                            <div class="van-image van-uploader__preview-image"
                                                style="overflow: hidden; border-radius: 4px;">
                                                <img :src="shoppingMallServerIP + imgItem" class="van-image__img"
                                                    style="object-fit: cover;" />
                                            </div>
                                            <i class="van-icon van-icon-clear van-uploader__preview-delete"
                                                @click="deleteImgItem(evaluatedData[index],imgItemIndex)"></i>
                                        </div>
                                        <div class="van-uploader__upload"
                                            v-if="evaluatedData[index].imageArray.length < 5"
                                            @click="addImage(evaluatedData[index])">
                                            <i class="van-icon van-icon-plus van-uploader__upload-icon"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="btn-padding">
                        <van-button :disabled="ifConfirm" :loading="ifConfirm" loading-text="评价提交中..." type="primary"
                            block @click="submitFormEvaluated">提交评价</van-button>
                    </div>
                </div>
                <van-loading v-if="showLoading" />
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var vm;
    apiready = function () {
        //$('.init-full').show();
        var OrderNo = '';

        var userInfo = FLD.getUserInfo();
        var UIAlbumBrowser = api.require('UIAlbumBrowser');

        var goodsEvaluated = api.pageParam.goodsEvaluated;
        var evaluatedData = [];
        for (var i in goodsEvaluated) {
            evaluatedData.push({
                productId: goodsEvaluated[i].ProductId,
                userName: FLD.getUserInfo().UserName,
                OrderId: goodsEvaluated[i].OrderId,
                reviewText: '',
                score: 5,
                image1: '',
                image2: '',
                image3: '',
                image4: '',
                image5: '',
                imageArray: []
            })
        }

        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                ifConfirm: false,
                serverIP: 'http://' + FLD.serverIP,
                shoppingMallServerIP: 'http://' + FLD.shoppingMallServerIP,
                goodsEvaluated: goodsEvaluated,
                evaluatedData: evaluatedData
            },
            created: function () {
                var that = this;
            },
            methods: {
                addImage(item) {
                    var isMulti = 5 - item.imageArray.length
                    var that = this;
                    UIAlbumBrowser.imagePicker({
                        max: isMulti,
                        styles: {
                            nav: {
                                bg: '#efefef',
                                cancelColor: '#000',
                                nextStepColor: '#000',
                                finishText: '完成'
                            }
                        },
                        rotation: true
                    }, function (ret) {
                        if (ret) {
                            if (ret.originalPath) {
                                // UIAlbumBrowser.closePicker();
                                UIAlbumBrowser.transPath({
                                    path: ret.assetPath || ret.originalPath
                                }, function (ret, err) {
                                    if (ret) {
                                        FLD.uploadFile_shop(ret.path, function (path) {
                                            item.imageArray.push(path)
                                        })

                                    }
                                });
                            } else if (ret.eventType == 'nextStep') {
                                UIAlbumBrowser.closePicker();
                                var imgLists = ret.list;
                                var repeatImg = function (i) {
                                    if (i == imgLists.length) {
                                        return;
                                    }
                                    UIAlbumBrowser.transPath({
                                        path: imgLists[i].path
                                    }, function (ret, err) {
                                        if (ret) {
                                            FLD.uploadFile_shop(ret.path, function (path) {
                                                item.imageArray.push(path)
                                                i++;
                                                repeatImg(i);
                                            })

                                        }
                                    });
                                }
                                repeatImg(0)

                            }

                        }
                    });
                },
                deleteImgItem(item, index) {
                    var that = this;
                    item.imageArray.splice(index, 1);
                },
                submitFormEvaluated() {
                    var that = this;
                    var repeatSubmit = function (x) {
                        if (x == that.evaluatedData.length) {

                            api.sendEvent({
                                name: 'refreshOrderDetail'
                            });
                            api.sendEvent({
                                name: 'refreshOrderList'
                            });
                            api.sendEvent({
                                name: 'refreshAboutUser'
                            });
                            layer.open({
                                content: '评价成功',
                                skin: 'msg',
                                time: 2,
                                end: function () {

                                    api.closeWin();
                                }
                            });
                            return false;

                        }
                        var imageArray = that.evaluatedData[x].imageArray;
                        that.evaluatedData[x].image1 = imageArray[0] || '';
                        that.evaluatedData[x].image2 = imageArray[1] || '';
                        that.evaluatedData[x].image3 = imageArray[2] || '';
                        that.evaluatedData[x].image4 = imageArray[3] || '';
                        that.evaluatedData[x].image5 = imageArray[4] || '';

                        FLD.ajax('sp_addProductReview', that.evaluatedData[x], function (res) {
                            x++;
                            repeatSubmit(x);
                        })
                    }
                    repeatSubmit(0);

                },
                onClickLeft() {
                    api.closeWin();
                }
            }
        })
    };
</script>

</html>